<template>
  <div class="numberPad">
    <div class="output">{{output}}</div>
    <div class="buttons">
      <button @click="inputContent">1</button>
      <button @click="inputContent">2</button>
      <button @click="inputContent">3</button>
      <button @click="remove">删除</button>
      <button @click="inputContent">4</button>
      <button @click="inputContent">5</button>
      <button @click="inputContent">6</button>
      <button @click="clear">清空</button>
      <button @click="inputContent">7</button>
      <button @click="inputContent">8</button>
      <button @click="inputContent">9</button>
      <button class="ok" @click="ok">OK</button>
      <button class="zero" @click="output+=0">0</button>
      <button @click="inputContent">.</button>
    </div>
  </div>
</template>

<script lang="ts">

  import Vue from 'vue';
  import {Component, Prop} from 'vue-property-decorator';

  @Component
  export default class NumberPad extends Vue {
    @Prop() readonly value!: number;
    output = this.value.toString();

    //000111  前面很多个0
    inputContent(event: MouseEvent) {
      if (event.target) {
        const button = (event.target as HTMLButtonElement);
        const input = button.textContent as string;
        if (this.output.length === 16) {
          return;
        }
        // const input = button.textContent!;  //!表示我这个变量不会为空的 不用在类型报错
        if (this.output === '0') {
          if ('0123456789'.indexOf(input) > -1) {
            this.output = input; //innerText也是可以的
          } else {
            this.output += input;
          }
          return;
        }
        if (this.output.indexOf('.') > -1 && input === '.') {
          return;
        }
        this.output += input;
        // console.log(event.target.innerText);  //event.target可能是undefined
        //强制告诉event.target是个按钮  不得已的强制
        // console.log((event.target as HTMLButtonElement).innerText);
      }
    }

    clear() {
      this.output = '0';
    }

    remove() {
      if (this.output.length === 1) {
        this.output = '0';
      } else {
        this.output = this.output.substring(0, this.output.length - 1);
      }
    }

    ok() {
      if(Number(this.output)){
      //但是要防止用户疯狂的点击 ok ok ok ok
      const number = parseFloat(this.output);
      this.$emit('update:value', number);
      this.$emit('submit', number);
      this.output = '0';
      }
    }
  }

</script>

<style lang="scss" scoped>
  @import "~@/assets/style/helper.scss";

  .numberPad {
    .output {
      @extend %clearFix;
      @extend %innerShadow;
      font-size: 36px;
      font-family: Consolas, monospace;
      padding: 9px 16px;
      text-align: right;
      height: 72px;
    }

    .buttons {
      @extend %clearFix;

      > button {
        width: 25%;
        height: 64px;
        float: left;
        background: transparent;
        border: none;

        &.ok {
          height: 64*2px;
          float: right;
        }

        &.zero {
          width: 25*2%;
        }

        $bg: #f2f2f2;

        &:nth-child(1) {
          background: $bg;
        }

        &:nth-child(2), &:nth-child(5) {
          background: darken($bg, 4%);
        }

        &:nth-child(3), &:nth-child(6), &:nth-child(9) {
          background: darken($bg, 4*2%);
        }

        &:nth-child(4), &:nth-child(7), &:nth-child(10) {
          background: darken($bg, 4*3%);
        }

        &:nth-child(8), &:nth-child(11), &:nth-child(13) {
          background: darken($bg, 4*4%);
        }

        &:nth-child(14) {
          background: darken($bg, 4*5%);
        }

        &:nth-child(12) {
          background: darken($bg, 4*6%);
        }
      }
    }
  }
</style>
